<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Mobile Shop</title>

	<!-- Bootstrap Core CSS -->
	<link rel="stylesheet" href="../../statics/css/bootstrap.min.css"  type="text/css">

	<!-- Custom CSS -->
	<link rel="stylesheet" href="../../statics/css/style.css">
	<link rel="stylesheet" href="../../statics/css/cart.css">


	<!-- Custom Fonts -->
	<link rel="stylesheet" href="../../statics/font-awesome/css/font-awesome.min.css"  type="text/css">
	<link rel="stylesheet" href="../../statics/fonts/font-slider.css" type="text/css">

	<!-- jQuery and Modernizr-->
	<script src="../../statics/js/jquery-2.1.1.js"></script>

	<!-- Core JavaScript Files -->
	<script src="../../statics/js/bootstrap.min.js"></script>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="../../statics/js/html5shiv.js"></script>
	<script src="../../statics/js/respond.min.js"></script>
	<![endif]-->

	<script type="text/javascript" src="../../statics/js/cartList.js"></script>
</head>
<body>
<!--Top-->
<nav id="top">
	<div class="container">
		<div class="row">
			<div class="col-xs-6">
				<select class="language">
					<option value="English" selected>English</option>
					<option value="France">France</option>
					<option value="Germany">Germany</option>
				</select>
				<select class="currency">
					<option value="USD" selected>USD</option>
					<option value="EUR">EUR</option>
					<option value="DDD">DDD</option>
				</select>
			</div>
			<div class="col-xs-6">
				<ul class="top-link">
					<c:choose>
						<c:when test="${empty userInfo.username}">
							<li><a href="/account"><span class="glyphicon glyphicon-user"></span>Login</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="/information"><span class="glyphicon glyphicon-user"></span>${userInfo.username}</a></li>
							<li><a href="/exit"><span>logout</span></a></li>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>
		</div>
	</div>
</nav>
<!--Header-->
<header class="container">
	<div class="row">
		<div class="col-md-4">
			<div id="logo"><img src="../../statics/images/logo.png" /></div>
		</div>
		<div class="col-md-4">
			<form class="form-search" action="/category" method="get">
				<input type="text" class="input-medium search-query" name="searchItem">
				<button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span></button>
			</form>
		</div>
		<div class="col-md-4">
			<div id="cart">
				<a class="btn btn-1" href="/cart">
					<span class="glyphicon glyphicon-shopping-cart">

					</span>CART : <label>${cartItemCount}</label> ITEM
				</a>
			</div>
		</div>
	</div>
</header>
<!--Navigation-->
<nav id="menu" class="navbar">
	<div class="container">
		<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
			<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
		</div>
		<div class="collapse navbar-collapse navbar-ex1-collapse">
			<ul class="nav navbar-nav">
				<li><a href="/index">Home</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">PC Computers</a>
					<div class="dropdown-menu">
						<div class="dropdown-inner">
							<ul class="list-unstyled">
								<li><a href="/category">Window</a></li>
								<li><a href="/category">MacBook</a></li>
							</ul>
						</div>
					</div>
				</li>
				<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Laptops &amp; Notebooks</a>
					<div class="dropdown-menu">
						<div class="dropdown-inner">
							<ul class="list-unstyled">
								<li><a href="/category">Dell</a></li>
								<li><a href="/category">Asus</a></li>
								<li><a href="/category">Samsung</a></li>
								<li><a href="/category">Lenovo</a></li>
								<li><a href="/category">Acer</a></li>
							</ul>
						</div>
					</div>
				</li>
				<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mobiles &amp; Tablet</a>
					<div class="dropdown-menu" style="margin-left: -203.625px;">
						<div class="dropdown-inner">
							<ul class="list-unstyled">
								<li><a href="/category">Iphone</a></li>
								<li><a href="/category">Samsung</a></li>
								<li><a href="/category">Nokia</a></li>
								<li><a href="/category">Lenovo</a></li>
								<li><a href="/category">Google</a></li>
							</ul>
							<ul class="list-unstyled">
								<li><a href="/category">Nexus</a></li>
								<li><a href="/category">Dell</a></li>
								<li><a href="/category">Oppo</a></li>
								<li><a href="/category">Blackberry</a></li>
								<li><a href="/category">HTC</a></li>
							</ul>
							<ul class="list-unstyled">
								<li><a href="/category">LG</a></li>
								<li><a href="/category">Q-Mobiles</a></li>
								<li><a href="/category">Sony</a></li>
								<li><a href="/category">Wiko</a></li>
								<li><a href="/category">T&T</a></li>
							</ul>
						</div>
					</div>
				</li>
				<li><a href="/category">Software</a></li>
			</ul>
		</div>
	</div>
</nav>
<!--//////////////////////////////////////////////////-->
<!--///////////////////Cart Page//////////////////////-->
<!--//////////////////////////////////////////////////-->
<div id="page-content" class="single-page">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<ul class="breadcrumb">
					<li><a href="/index">Home</a></li>
					<li><a href="/cart">Cart</a></li>
				</ul>
			</div>
		</div>
		<c:forEach items="${cartList}" var="cartItem">
			<div class="row">
				<div class="product well">
					<div class="col-md-3">
						<div class="image">
							<img src="../../statics/images/${cartItem.mobile.phonename}.jpg" />
						</div>
					</div>
                    <c:set var="jumpProduct" value="/product/${cartItem.mobile.id}"/>
					<div class="col-md-9">
						<div class="caption">
							<div class="name"><h3><a href="${jumpProduct}">${cartItem.mobile.phonename}</a></h3></div>
							<div class="info">
								<ul>
									<li class="brand">Brand: ${cartItem.mobile.brand}</li>
									<li class="id">ID: ${cartItem.mobile.id}</li>
								</ul>
							</div>

							<div class="price">￥${cartItem.mobile.price * cartItem.quantity}<span>￥${(cartItem.mobile.price+199) * cartItem.quantity}</span></div>
							<label>Quantity: </label> <input class="form-inline quantity" type="text" value=${cartItem.quantity}><a href="javascript:;" class="btn btn-2 updateCartItem" cartId=${cartItem.id} cartName=${cartItem.mobile.phonename}>Update</a>
							<hr>
							<a href="javascript:;" class="btn btn-default pull-right deleteCartItem" cartId=${cartItem.id} cartName=${cartItem.mobile.phonename}>REMOVE</a>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</c:forEach>

		<div class="row">
			<div class="col-md-4 col-md-offset-8 ">
				<center><a href="/index" class="btn btn-1">Continue To Shopping</a></center>
			</div>
		</div>
		<div class="row">
			<div class="pricedetails">
				<div class="col-md-4 col-md-offset-8">
					<table>
						<h6>Price Details</h6>
						<tr>
							<td>Total</td>
							<td>${cartItemsTotal}</td>
						</tr>
						<tr>
							<td>Discount</td>
							<td>-----</td>
						</tr>
						<tr>
							<td>Delivery Charges</td>
							<td><c:choose>
								<c:when test="${cartItemsTotal == 0}">
									0.0
								</c:when>
								<c:otherwise>
									100.0
								</c:otherwise>
							</c:choose></td>
						</tr>
						<tr style="border-top: 1px solid #333">
							<td><h5>TOTAL</h5></td>
							<td><c:choose>
								<c:when test="${cartItemsTotal == 0}">
									${cartItemsTotal+0}
								</c:when>
								<c:otherwise>
									${cartItemsTotal+100}
								</c:otherwise>
							</c:choose></td></td>
						</tr>
					</table>
					<center><a href="javascript:;" class="btn btn-1 checkoutCart" cartList = "${cartList}">Checkout</a></center>
				</div>
			</div>
		</div>
	</div>
</div>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeCartItem">
	<div class="removerChid">
		<h2>提示</h2>
		<div class="removeMain">
			<p>你确定要删除该物品吗？</p>
			<a href="#" id="yes">确定</a>
			<a href="#" id="no">取消</a>
		</div>
	</div>
</div>
<div class="update" id="updateCartItem">
	<div class="updateChid">
		<h2>提示</h2>
		<div class="updateMain">
			<p>你确定要更新该物品吗？</p>
			<a href="#" id="ensure">确定</a>
			<a href="#" id="cancle">取消</a>
		</div>
	</div>
</div>
<div class="checkout" id="checkoutCartItem">
	<div class="checkoutChid">
		<h2>提示</h2>
		<div class="checkoutMain">
			<p>你确定要更新该物品吗？</p>
			<a href="#" id="ok">确定</a>
			<a href="#" id="unok">取消</a>
		</div>
	</div>
</div>

<div class="emptyTip" id="emptyTip">
	<div class="emptyTipChid">
		<h2>提示</h2>
		<div class="emptyTipMain">
			<p>购物车无商品</p>
			<a href="#" id="ook">确定</a>
		</div>
	</div>
</div>

<footer>
	<div class="container">
		<div class="wrap-footer">
			<div class="row">
				<div class="col-md-3 col-footer footer-1">
					<img src="../../statics/images/logofooter.png" />
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
				<div class="col-md-3 col-footer footer-2">
					<div class="heading"><h4>Customer Service</h4></div>
					<ul>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Delivery Information</a></li>
						<li><a href="#">Privacy Policy</a></li>
						<li><a href="#">Terms & Conditions</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</div>
				<div class="col-md-3 col-footer footer-3">
					<div class="heading"><h4>My Account</h4></div>
					<ul>
						<li><a href="#">My Account</a></li>
						<li><a href="#">Brands</a></li>
						<li><a href="#">Gift Vouchers</a></li>
						<li><a href="#">Specials</a></li>
						<li><a href="#">Site Map</a></li>
					</ul>
				</div>
				<div class="col-md-3 col-footer footer-4">
					<div class="heading"><h4>Contact Us</h4></div>
					<ul>
						<li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
						<li><span class="glyphicon glyphicon-earphone"></span>+91 8866888111</li>
						<li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					Copyright &copy; 2015.Company name All rights reserved.
				</div>
				<div class="col-md-6">
					<div class="pull-right">
						<ul>
							<li><img src="../../statics/images/visa-curved-32px.png" /></li>
							<li><img src="../../statics/images/paypal-curved-32px.png" /></li>
							<li><img src="../../statics/images/discover-curved-32px.png" /></li>
							<li><img src="../../statics/images/maestro-curved-32px.png" /></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</footer>
</body>
</html>
